import React from "react";
import "./Header.css"
export default class Header extends React.Component{

    //声明状态/数据
    state = {
        headerArr:["html","css","js","node","react"],
        index:0
    }


    //方法   实例对象
    changeHeader = (i) => {
       return ()=>{
        //更新数据
        this.setState({
            index:i
        })
       }
    }


    render(){
        return <div className="header">
            <ul>
                {
                    this.state.headerArr.map((item,index) => {
                        return <li className={this.state.index === index ? "bg" :null}   onClick={this.changeHeader(index)} key={index}>{item}</li>
                    })
                }
                
                
            </ul>
        </div>
    }
}